<template>
  <div class="content">
    <div class="toper">
      <div class="back" @click="$router.back()">
        <van-icon name="arrow-left" color="#fff" size="24px" />
      </div>
    </div>
    <div class="contact_Title">
      <h1>申请售后</h1>
    </div>
    <div class="contact_text">
      <div class="contact_card">
        <van-card
          :price='price'
          :title="title"
          :thumb="thumb"
          currency
        >
          <template #tags>
            <van-tag plain type="danger" class="tags-s">{{sku}}</van-tag>
            <van-tag plain type="danger" class="tags-s">{{num}}</van-tag>
          </template>
          <template #footer>
            <van-button size="mini">待发货</van-button>
            <van-button size="mini" class="createData">{{data}}</van-button>
          </template>
        </van-card>
      </div>
      <div class="sale-style">
        <h3>选择售后类型</h3>
        <div class="sale-style-btn">
          <van-button type="default" color="#666" class="tuihuan">退货退款</van-button>
          <van-button type="default" class="tuihuan">直接换货</van-button>
        </div>
      </div>
      <div class="sale-desc">
        <h4>申请说明</h4>
        <!-- <div id="toast1">您还可以输入<span>300</span>字</div> -->
        <van-field
          autosize
          v-model="message"
          rows="2"
          type="textarea"
          maxlength="50"
          placeholder="请输入留言"
          show-word-limit
          class="mess"
        >
        </van-field>
          <van-uploader
            multiple
            :max-count="5"
            :max-size="3 * 1024 * 1024"
            @oversize="onOversize"
            class="picture"
          />
      </div>
      <div class="telstyle">
        <van-field v-model="tel" type="tel" label="联系方式" />
      </div>
    </div>
    <div class="contact_tucao">
      <router-link tag="p" to="/customerWork">
        <van-button type="primary" size="large" color="#666">提交申请</van-button>
      </router-link>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { Icon, Button, Tag, Card, Field, Uploader } from 'vant'

Vue.use(Icon)
Vue.use(Button)
Vue.use(Card)
Vue.use(Tag)
Vue.use(Field)
Vue.use(Uploader)

export default {
  data () {
    return {
      price: '实付99.99元',
      sku: 'sku',
      num: '数量',
      data: '2019.6.15',
      title: '商品名称',
      thumb: 'https://img.yzcdn.cn/vant/ipad.jpeg',
      description: '',
      tel: '13456459870',
      message: ''
    }
  },
  methods: {
    goCustomerWork () {
      console.log('yftougou')
      this.$router.push('/customerWork')
    },
    onOversize (file) {
      console.log(file)
    }
    // btnClick () {
    //   const btn2 = document.getElementByClass("tuihuan")
    //   btn2.style.color = '#333'
    // }
  }
}
</script>

<style lang="scss" scoped>
.toper{
  padding: 0.1rem 0.1rem;
  .back{
    width:0.4rem;
    height:0.4rem;
    border-radius: 50%;
    background-color: #666;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
.contact_Title{
  height: 0.6rem;
  padding-left:0.1rem;
  h3{
    font-size: 18px;
    font-weight:bold;
    padding-bottom: 5px;
  }
}
.createData{
  height:30px;
  border:none;
  font-size: 14px;
  position: absolute;
  top:10px;
  right: 10px;
}
.van-card__content{
  font-size:16px;
  .van-card__title {
    line-height: 28px;
  }
  .tags-s{
    margin-left:5px;
  }
}
.sale-style{
  padding:0.1rem 0.1rem;
  .sale-style-btn{
    padding-top:10px;
    .tuihuan{
      margin:0 18px;
      width: 120px;
      height: 50px;
    }
  }
}
.sale-desc{
  margin-left: 0.1rem;
  .mess{
    border-bottom: none;
  }
  .picture{
    padding-top:6px;
    .van-uploader__upload{
      border: 2px dotted #eee;
    }
  }
}
.telstyle{
  margin: 10px 10px;
}
.contact_tucao{
  position: absolute;
  left: 28px;
  top: 600px;
  width: 319px;
  height: 40px;
  font-size: 16px;
  color: #FFFFFF;
}
</style>
